<template>
  <div style="min-height: calc(100vh - 340px)">
    <div
      class="bg w-full h-[10rem] grid justify-items-center content-center gap-[0.5rem]"
    >
      <div
        style="
          border-radius: 50%;
          height: 90px;
          /* height: 3rem;
          width:3rem; */
          color: #fff;
          text-align: center;
          font-weight: bold;
          font-size: 42px;
          line-height: 90px;
          text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
        "
      >
        {{ jifen }}
      </div>
      <span class="text-[#fff]">当前积分</span>
    </div>
    <div class="mt-[20px] flex gap-[20px] flex-wrap">
      <div
        v-for="item in list"
        :key="item.key"
        :class="`h-[96px] w-[326px] grid justify-items-center content-center gap-[10px] relative ${
          selctedOne == item.key ? 'item-selected' : 'item'
        }`"
        @click="selctedOne = item.key"
      >
        <div>
          <span style="font-weight: bold; font-size: 34px; color: #ff4848"
            >¥{{ item.money }}</span
          >
          <span style="font-size: 16px; color: #a9b1be">抵扣码</span>
        </div>
        <div style="font-size: 14px; color: #fe8d03">
          消耗积分：{{ item.score }}
        </div>

        <img
          v-if="selctedOne == item.key"
          class="absolute right-0 bottom-0"
          src="@/assets/img/work/asset-selected.png"
          height="28"
          width="28"
        />
      </div>
    </div>
    <div class="flex justify-center mt-[20px]">
      <div
        class="flex gap-[12px] items-center h-[40px] w-[180px] bg-[#F43107] rounded-[8px] justify-center cursor-pointer"
        @click="exchange"
      >
        <span class="text-[#fff]">立即兑换</span>
        <img src="@/assets/img/work/asset-right.png" width="26" height="10" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { message } from "ant-design-vue";
import { computed, onMounted } from "vue";
import { exchange_list, exchange_add } from "../../../../Api/work";
import { useUserStore } from "../../../../stores/menuStore";
const store = useUserStore();

const jifen = computed(() => {
  const jifen = Number(store.user?.jifen || 0)

  return jifen>10000 ? (jifen/10000).toFixed(2)+'万' : jifen

});

const list = ref([]);

const selctedOne = ref("");

onMounted(async () => {
  const res = await exchange_list();
  const arr = [];
  for (const key in res?.data?.data) {
    arr.push({
      key: key,
      money: key,
      score: res.data?.data?.[key],
    });
  }
  selctedOne.value = arr?.[0].key;
  list.value = arr;
});

const exchange = async () => {
  const res = await exchange_add({ price: selctedOne.value });

  if (res?.data?.code == 1) {
    message.success("操作成功");
    store.setUser()
  } else {
    message.error(res?.data?.msg);
  }
};
</script>

<style lang="scss" scoped>
.bg {
  background: url(@/assets/img/work/asset-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.item-selected {
  background: #fffbf4;
  border-radius: 4px;
  border: 1px solid #f9b430;
}
.item {
  background: #fff;
  border-radius: 4px;
  border: 1px solid #ddd;
  cursor: pointer;
}
</style>
